<!-- 详情模式 -->
<template >
  <el-form-item :key="index"
                :prop="item.prop"
                :label-width="calcDefaultOption(item,'labelWidth', '')"
                :rules="calcDefaultOption(item,'rules',[])"
                :class="['dst-add-form-item', isHasOther ? 'hasOther-el-form-item': '', item.class || '']">
    <!-- 渲染左边label部分 -->
    <template>
      <div v-if="item.renderLabel"
           slot="label">
        <render :render="item.renderLabel"
                :form="ruleForm"
                :item="item" />
      </div>
      <div v-else-if="item.label"
           slot="label">{{ item.label }}</div>
    </template>

    <template v-if="item.type =='render'">
      <render :render="item.render"
              :form="ruleForm"
              :item="item" />
    </template>
    <!-- 需要左边的lable，但右边自定义slot -->
    <template v-if="item.type =='slot'">
      <slot :name="item.prop"
            :form="ruleForm" />
    </template>
    <template v-if="item.type =='input'">
      <el-input v-model="ruleForm[item.prop]"
                class="dst-add-input"
                :disabled="item.disabled"
                :maxlength="item.maxlength||''"
                :placeholder="item.placeholder||`请输入${item.label || ''}`"
                :clearable="calcDefaultOption(item, 'clearable',true)"
                @change="itemChange(item)"
                @input="itemChange(item)" />
    </template>
    <template v-if="item.type =='textarea'">
      <el-input v-model="ruleForm[item.prop]"
                class="dst-add-input dst-add-textarea-600px"
                :disabled="item.disabled"
                :clearable="calcDefaultOption(item, 'clearable',true)"
                :autosize="calcDefaultOption(item,'autosize', { minRows: 2, maxRows: 15 })"
                :rows="calcDefaultOption(item,'rows', 2)"
                :maxlength="item.maxlength||''"
                :placeholder="item.placeholder||`请输入${item.label || ''}`"
                type="textarea" />
    </template>
    <template v-if="item.type =='daterange'">
      <el-date-picker v-model="ruleForm[item.prop]"
                      class="dst-add-input"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :format="item.format||'yyyy-MM-dd'"
                      :value-format="item.format||'yyyy-MM-dd'"
                      :disabled="item.disabled"
                      :picker-options="item.pickerOptions||[]"
                      clearable
                      @change="itemChange(item)" />
    </template>
    <template v-if="item.type =='date'">
      <el-date-picker v-model="ruleForm[item.prop]"
                      type="date"
                      class="dst-add-input"
                      :disabled="item.disabled"
                      :format="item.format||'yyyy-MM-dd'"
                      :value-format="item.format||'yyyy-MM-dd'"
                      :picker-options="item.pickerOptions||[]"
                      placeholder="选择日期"
                      @change="itemChange(item)" />
    </template>
    <template v-if="item.type =='datetime'">
      <el-date-picker v-model="ruleForm[item.prop]"
                      type="datetime"
                      class="dst-add-input"
                      :disabled="calcDefaultOption(item, 'disabled', false)"
                      :default-time="calcDefaultOption(item, 'defaultTime', '00:00:00')"
                      :format="item.format||'yyyy-MM-dd HH:mm:ss'"
                      :value-format="item.format||'yyyy-MM-dd HH:mm:ss'"
                      :picker-options="item.pickerOptions||[]"
                      :placeholder="calcDefaultOption(item, 'placeholder', `请选择${item.label || ''}`)"
                      @change="itemChange(item)" />
    </template>
    <template v-if="item.type =='month'">
      <el-date-picker v-model="ruleForm[item.prop]"
                      class="dst-add-input"
                      type="month"
                      :format="item.format||'yyyy-MM'"
                      :value-format="item.format||'yyyy-MM'"
                      :picker-options="item.pickerOptions||[]"
                      clearable
                      @change="itemChange(item)" />
    </template>
    <template v-if="item.type =='select'">
      <el-select v-model="ruleForm[item.prop]"
                 :disabled="item.disabled"
                 class="dst-add-input"
                 :multiple="item.multiple||false"
                 :collapse-tags="item.collapseTags||false"
                 :remote="item.remote||false"
                 :allow-create="calcDefaultOption(item, 'allowCreate', false)"
                 :loading="item.loading||false"
                 :remote-method="item.remoteMethod"
                 :filterable="item.filterable || true"
                 :placeholder="item.placeholder||'请选择'"
                 :clearable="calcDefaultOption(item, 'clearable', true)"
                 @change="(id) => { selectItemChange(item, id) }">
        <el-option v-for="(selItem, selindex) in item.options"
                   :key="selindex"
                   :disabled="(item.props && item.props.disabled) ? selItem[item.props.disabled] : (selItem.disabled || false)"
                   :label="(item.props && item.props.label) ? selItem[item.props.label] : selItem.label"
                   :value="(item.props && item.props.value) ? selItem[item.props.value] +'' : selItem.value +''">
          <span style="float: left">{{ (item.props && item.props.label) ? selItem[item.props.label] : selItem.label }}</span>
          <span v-if="item.props && item.props.rightLabel"
                style="float: right; color: #8492a6; font-size: 13px">{{ (item.props && item.props.rightLabel) ? selItem[item.props.rightLabel] : selItem.rightLabel }}</span>
        </el-option>
      </el-select>
    </template>
    <template v-if="item.type =='checkbox'">
      <el-checkbox-group v-model="ruleForm[item.prop]"
                         class="dst-add-input"
                         @change="(id) => { selectItemChange(item, id) }">
        <el-checkbox v-for="(checkbox,checkindex) in item.options"
                     :key="checkindex"
                     :label="(item.props && item.props.value) ? checkbox[item.props.value] +'' : checkbox.value +''"
                     :disabled="checkbox.disabled">{{ (item.props && item.props.label) ? checkbox[item.props.label] : checkbox.label }}</el-checkbox>
      </el-checkbox-group>
    </template>
    <template v-if="item.type=='cascader'">
      <el-cascader v-model="ruleForm[item.prop]"
                   :options="setValueNumToStr(item)"
                   class="dst-add-input"
                   :disabled="item.disabled || false"
                   :filterable="item.filterable || true"
                   :clearable="item.clearable || true"
                   :change-on-select="item.changeOnSelect||false"
                   :props="calcDefaultOption(item, 'props', {value: 'value',label: 'label',children: 'children',disabled: 'disabled'})"
                   @active-item-change="(val) => {cascaderItemChange(val, item)}"
                   @change="(id) => { selectCascaderChange(item, id) }" />
    </template>
    <template v-if="item.type=='radio'">
      <el-radio-group v-model="ruleForm[item.prop]"
                      :disabled="item.disabled || false"
                      class="dst-add-input"
                      @change="itemChange(item)">
        <el-radio v-for="(selItem,selindex) in item.options"
                  :key="selindex"
                  :disabled="selItem.disabled||false"
                  :label="(item.props && item.props.value) ? selItem[item.props.value] +'' : selItem.value +''">{{ (item.props && item.props.label) ? selItem[item.props.label] : selItem.label }}</el-radio>
      </el-radio-group>
    </template>
    <template v-if="item.type =='button'">
      <el-button :plain="calcDefaultOption(item, 'plain', true)"
                 class="hasOther-left-margin"
                 :disabled="item.disabled || false"
                 :type="item.btnType || 'success'"
                 :class="item.btnClass || ''"
                 :size="item.btnSize || 'mini'"
                 :icon="item.iconName || ''"
                 @click="itemClick(item, index)">{{ calcDefaultOption(item, 'text', '确定') }}</el-button>
    </template>
    <template v-if="item.type=='dstUpload'">
      <dstUpload ref="dstUpload"
                 v-model="ruleForm[item.prop]"
                 class="dst-add-input"
                 :mode-type="calcDefaultOption(item, 'modeType', 'add')"
                 :params="calcDefaultOption(item, 'params', {})"
                 :base-api="calcDefaultOption(item, 'baseApi', '')"
                 :filter-opts="calcDefaultOption(item, 'filterOpts', {})"
                 :limit="calcDefaultOption(item, 'limit', 10)"
                 :is-preview="calcDefaultOption(item, 'isPreview', true)"
                 :btn-name="calcDefaultOption(item, 'btnName', '点击上传')"
                 :list-type="calcDefaultOption(item, 'listType', 'text')"
                 :props="calcDefaultOption(item, 'props', {fileName: 'fileName', fileUrl: 'fileUrl',saveUrl: 'saveUrl'})"
                 :action-url="calcDefaultOption(item, 'actionUrl', '')"
                 :show-tip="calcDefaultOption(item, 'showTip', false)"
                 :auto-upload="calcDefaultOption(item, 'autoUpload', true)"
                 :multiple="calcDefaultOption(item, 'multiple', false)"
                 :upload-server-type="item.uploadServerType || 'dst'"
                 @change="itemChange(item)"
                 @onSuccess="(...params) => fileOnSuccess(item, params)"
                 @onError="(...params) => fileOnError(item, params)">
        <div v-if="item.slotTip"
             slot="tip"
             class="el-upload__tip"
             v-html="item.slotTip" />
      </dstUpload>
    </template>
    <template v-if="item.type=='selectDDuser'">
      <selectDDuser v-if="item.type == 'selectDDuser'"
                    v-model="ruleForm[item.prop]"
                    class="dst-add-input"
                    :disabled="item.disabled || false"
                    :is-emit-chang-from-out-value="item.isEmitChangFromOutValue || false"
                    :value-props="calcDefaultOption(item,'valueProps',{id:'job_num'})"
                    :data-ingredient-conf="calcDefaultOption(item,'dataIngredientConf','dd')"
                    @change="(info)=>{itemChange(item, info)}" />
    </template>
    <template v-if="item.type=='text' || item.type === undefined">
      <div class="dst-add-input">
        <el-tooltip v-if="item.tooltip && setDetailShowText(ruleForm[item.prop]) !== '-'"
                    effect="dark"
                    :content="setDetailShowText(ruleForm[item.prop])"
                    placement="top-start">
          <div>{{ setDetailShowText(ruleForm[item.prop]) }}</div>
        </el-tooltip>
        <template v-else>
          <div>{{ setDetailShowText(ruleForm[item.prop]) }}</div>
        </template>
      </div>
    </template>
    <DstFormAdd v-if="item.hasOther && Object.prototype.toString.call(item.hasOther) === '[object Object]' && !item.hasOther.isHidden"
                :key="index"
                ref="DstFormAddHasOther"
                :item="item.hasOther"
                :is-has-other="true"
                :rule-form="ruleForm"
                :index="index"
                @cascaderItemChange="cascaderItemChange"
                @selectCascaderChange="selectCascaderChange"
                @selectItemChange="selectItemChange"
                @itemChange="itemChange"
                @itemClick="itemClick">
      <slot v-if="item.hasOther.prop"
            :slot="item.hasOther.prop"
            :name="item.hasOther.prop"
            :form="ruleForm" />
    </DstFormAdd>
  </el-form-item>
</template>
<script>

import SelectTree from '@/portal-common/components/SelectTree'
import dstUpload from '@/portal-common/components/DstUpload/index'
import render from './render'
export default {
  name: 'DstFormAdd',
  components: { render, SelectTree, dstUpload },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    ruleForm: {
      type: Object,
      default() {
        return {}
      }
    },
    index: {
      type: [Number, String],
      default() {
        return null
      }
    },
    isHasOther: {
      type: Boolean,
      default() {
        return false
      }
    },
  },
  data() {
    return {

    }
  },
  mounted() {
    // console.log(this.item, 222111)
  },
  methods: {
    // 纯文案时，有些值为空数组或者null，undefined的情况。文本模式的项：统统显示空字符
    setDetailShowText(value) {
      if (Array.isArray(value)) {
        if (value.length === 0) {
          return '-'
        } else {
          return value.join(',')
        }
      } else if (!value && parseInt(value) !== 0) {
        return '-'
      } else {
        return value
      }
    },
    calcDefaultOption(item, type, defalut = true) {
      return (item[type] !== undefined) ? item[type] : defalut
    },
    // 将cascader联动组件的option里的value改成字符类型
    setValueNumToStr(item) {
      // 给个默认值，防止用户的props只传了部分字段
      const { value = 'value', children = 'children' } = this.calcDefaultOption(item, 'props', { value: 'value', children: 'children' })
      function deepFor(node) {
        node.forEach((itemIn, index) => {
          if (Object.prototype.toString.call(itemIn[value]) === '[object Number]') {
            // 将与表单绑定的值取出，如果是数字转成字符串，防止下拉框的option与value对不上的情况发生
            itemIn[value] += ''
          }
          if (itemIn[children] && itemIn[children].length > 0) {
            deepFor(itemIn[children])
          }
        })
        return node
      }
      return deepFor(item.options)
    },
    cascaderItemChange(val, item) {
      this.$emit('cascaderItemChange', val, item)
    },
    itemClick(item, index) {
      this.$emit('itemClick', item, index)
    },
    selectCascaderChange(item, arr) {
      this.$emit('selectCascaderChange', item, arr)
    },
    selectItemChange(item, id) {
      this.$emit('selectItemChange', item, id)
    },
    itemChange(item, ...otherParams) { // otherParams指的是组件本身的回调参数
      this.$emit('itemChange', item, ...otherParams)
    },
    // 附件上传成功回调
    fileOnSuccess(item, params) {
      if (item.onSuccess) {
        item.onSuccess(item, ...params)
      }
    },
    // 附件上传失败回调
    fileOnError(item, params) {
      if (item.onError) {
        item.onError(item, ...params)
      }
    },
    // 是否有文件正在上传中
    getIsUploading() {
      if (this.$refs.dstUpload && this.$refs.dstUpload.getIsUploading()) {
        this.$alert('文件正在上传中，请耐心等待,稍后重试', '提醒', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
        return true
      }
      if (this.$refs.DstFormAddHasOther) {
        return this.$refs.DstFormAddHasOther.getIsUploading()
      }
      return false
    },
  }
}
</script>
